<template>
  <el-row>
    <el-col :span="22"><div style="width: 760">
    <el-select
      v-model="type"
      class="m-1 select"
      placeholder="选择"
      size="default"
      style="width: 100px"
      filterable
      allow-create
      default-first-option
      @change="methods.handleSelect"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-tag
      v-for="tag in dynamicTags"
      :key="tag"
      class="mx-1"
      closable
      :disable-transitions="false"
      @close="methods.handleClose(tag)"
    >
      {{ tag }}
    </el-tag>
    <el-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="ml-1 w-20"
      size="default"
      @keyup.enter="methods.handleInputConfirm"
      @blur="methods.handleInputConfirm"
    />
    <el-button
      v-else
      class="button-new-tag ml-1"
      size="default"
      @click="methods.showInput"
    >
      + 新增
    </el-button > 
  </div></el-col>
    <el-col :span="2">
      <el-button type="danger" class="ml-1 w-10" @click="methods.handleDeleteRow">删除</el-button>
    </el-col>
  </el-row>
  
  
</template>

<script lang="ts">
import { rowData } from "@/entity/inlineEntityDefines";
import { defineComponent, nextTick, reactive, ref ,defineExpose, Ref} from "vue";
import { ElInput } from "element-plus";
import { th } from "element-plus/es/locale";

export default defineComponent({
  name: "FlavorSetting",
  props: {
    msg: String,
    title: String,
    initData: Object,
    index: String,
    vid: String
  },
  mounted() {
    console.log("setting mounted");
    console.log(reactive(this.initData as rowData).flavorName)
    console.log(reactive(this.initData as rowData).tags)
    this.methods.setData(reactive(this.initData as rowData).flavorName,reactive(this.initData as rowData).tags);
    this.methods.setVid(this.vid??"");
  },

  setup(props: any, { emit ,expose }) {
    const inputVisible = ref(false);
    const InputRef = ref<InstanceType<typeof ElInput>>();
    const dynamicTags = ref(["默认口味"]);
    const inputValue = ref("");

    const index = ref(-1);
    const vid = ref("");

    const options = [
      {
        value: "甜味",
        label: "甜味",
      },
      {
        value: "温度",
        label: "温度",
      },
      {
        value: "忌口",
        label: "忌口",
      },
      {
        value: "辣度",
        label: "辣度",
      },
    ];
    const type = ref("");
    
    expose = ()=>{
      //
      methods
    }
    // interface exFace {
    //         ex1:Ref<string>,
    //         ex2?:number
    //         }
    // let ex1 = ref('1')
    // let exObj:exFace = {
    //   ex1,
    // }
    // 源码类型: const defineExpose: (exposed?: Record<string, any>) => void
    // expose(exObj)

    
    const methods = {

      setVid(vidinput:string) {
        vid.value = vidinput;
      },
      setIndex(rowIndex: number) {
        index.value = rowIndex;
      },
      setData(falvorName:string, tags:string[]) {
        type.value = falvorName;
        dynamicTags.value = tags;
      },
      getData():rowData{
        return {
          vid: vid.value,
          flavorName: type,
          tags: dynamicTags
        }
      },
      send(result: boolean) {
        emit("fatherFun", result); // 第一个参数是子组件派发的函数名(子传父是通过函数事件派发)
      },
      handleClose(tag: string) {
        dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      },

      showInput() {
        inputVisible.value = true;
        nextTick(() => {
          InputRef.value!.input!.focus();
        });
      },

      handleInputConfirm() {
        if (inputValue.value) {
          dynamicTags.value.push(inputValue.value);
        }
        inputVisible.value = false;
        inputValue.value = "";
      },
      handleSelect(val: string) {
        //
        console.log(val);
        switch (val) {
          case "甜味":
            dynamicTags.value = ["无糖", "少糖", "半塘", "多糖", "全塘"];
            break;
          case "温度":
            dynamicTags.value = ["热饮", "常温", "去冰", "少冰", "多冰"];
            break;
          case "忌口":
            dynamicTags.value = ["不要葱", "不要蒜", "不要香菜", "不要辣"];
            break;
          case "辣度":
            dynamicTags.value = ["不辣", "微辣", "中辣", "重辣"];
            break;
        }
      },
      handleDeleteRow() {
        //
        emit("fatherFun", vid.value);
      }
    };

    return {
      methods,
      inputVisible,
      InputRef,
      dynamicTags,
      inputValue,
      options,
      type,
    };
  },
});
</script>

<style scoped>
.el-row {
  margin-bottom: 8px;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  height: 32px;
  font-size: small;
}
.w-20 {
  width: 120px;
}
.fixtag {
  padding-top: 0px;
}
.button-new-tag {
  margin-left: 3px;
  height: 32px;
  margin-top: -1px;
}
.select {
  height: 32px;
  margin-top: -1px;
}
</style>
